import React from "react";
import {ScrollView, View} from "react-native";
import chjStyle from "../../../CustomStyle";
import ModuleCommonHeader from "../../../main/module/ModuleCommonHeader";
import CommonTextItem from "../../../main/record/common/CommonTextItem.js";
import SingleSelectionTextItem from "../../../main/record/common/SingleSelectionTextItem.js";
import Util from "../../../main/Util.js";
import NextButton from "../../../main/record/common/NextButton";
import {Actions} from "react-native-router-flux";

export default class HelpCarFrame extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {};
        const {carData} = props;
        if (!carData.carframe) {
            carData.carframe = Util.defaultCarframe();
        }
    }

    // 组件被加载时
    componentDidMount() {
    }

    // 组件即将被卸载时
    componentWillUnmount() {
    }

    // ------------------------------------------ 拍照item的代码 -------------------------------------
    // 根据名字渲染对应数量的CommonTextItem，并设置一个匿名函数作为回调接收点击事件
    renderPhotoItem(item, i) {
        const {carData} = this.props;
        if (i === 0)
            return (<SingleSelectionTextItem object={carData.carframe[i]}
                                             onSelectedListener={this.onSelected.bind(this)}
                                             optionArray={[{name: "正常"}, {name: "左右不对称超40mm"}]}/>);
        else
            return (<CommonTextItem object={carData.carframe[i]} valueRenderer={this.renderValue.bind(this)}
                                    ref={'photoItem' + i} onClickedListener={() => this.onPhotoClicked(item, i)}/>);
    }

    // 新增一个render属性给TextItem，这样可以自定义渲染效果
    renderValue(item) {
        return Util.decodePhotoStringToViewString(item);
    }

    // 点击到某一个photoItem的时候，push一个新界面进去，在route中传递Result回调
    onPhotoClicked(item, i) {
        Actions.CommonPhotoSelection(
            {
                title: item.name,
                optionString: item.value,
                onResultListener: (value) => this.onPhotoResult(value, i)
            }
        );
    }

    // 结果回调，接收的结果value, 另外一个index是用来传递一下点击了哪个
    onPhotoResult(value, index) {
        const {carData} = this.props;
        carData.carframe[index].value = value;
        const viewString = Util.decodePhotoStringToViewString(value);
        this.refs['photoItem' + index].setState({
            v: viewString,
            highlight: viewString !== '正常',
        });
    }

    // ------------------------------------------------------------------------------------------------

    // 组件被渲染时
    render() {
        const {carData} = this.props;
        return (
            <View style={chjStyle.mainContainer}>
                <ModuleCommonHeader title='车辆骨架(03)' clickedLeft={this.clickedBack.bind(this)} leftText='返回'
                                    clickedRight={this.clickedNew.bind(this)} rightText='保存'/>
                <ScrollView
                    style={chjStyle.mainList}>
                    {
                        carData.carframe.map((item, i) => this.renderPhotoItem(item, i))
                    }
                </ScrollView>
                <NextButton onClickedListener={() => this.clickedNew()}/>
            </View>
        );
    }

    clickedBack() {
        Actions.pop();
    }

    clickedNew() {
        const {saveKey, carData} = this.props;
        Util.saveData(saveKey, carData);
        Actions.HelpCarFace(
            {
                saveKey,
                carData,
            }
        );
    }

    onSelected() {
    }
}
